<script setup>
import VueOfficeDocx from '@vue-office/docx'
import VueOfficeExcel from '@vue-office/excel'
// import VueOfficePdf from '@vue-office/pdf'
import PdfViewer from '@/components/PdfViewer/index.vue'
import MarkdownViewer from '@/components/markdown-viewer/index.vue'
import {ref, watch} from 'vue'

const base = import.meta.env.VITE_BASE_PATH
const emit = defineEmits(['update:show'])

const markdown = ['.html', '.md', '.json', '.py', 'xml', '.csv', '.txt', '.log']
const pdf = ['.pdf']
const docx = ['.docx']
const excel = ['.xlsx']
const iframes = ['.pptx']
const img = ['.png', '.jpg', '.jpeg']

const fileContent = ref('')

const markdown_types = {
  '.html': '```html\n',
  '.md': '',
  '.json': '```json\n',
  '.py': '```python\n',
  '.xml': '```xml\n',
  '.csv': '```text\n',
  '.log': '```text\n',
  '.txt': '```text\n',
}

const iframe_types = {
  '.pptx': `${base}/PPTXjs/index.html?file=`,
  '.txt': '',
  '.csv': '',
  '.log': '',
}

const props = defineProps({
  ext: String,
  url: String,
  show: Boolean,
  fileName: String,
})

const downloadFile = () => {
  if (markdown.indexOf(props.ext) >= 0) {
    fetch(props.url)
      .then((response) => response.text())
      .then((data) => {
        fileContent.value = data
      })
      .catch((err) => console.log(err))
  }
}

watch(
  () => props.url,
  () => {
    downloadFile()
  }
)

const fileDownload = () => {
  window.open(props.url.replace('preview=1', 'preview=0'), '_blank')
}

const onClose = () => {
  emit('update:show', false)
}

const scale = ref(1)
const scaleHandle = (step) => {
  scale.value += step
}
</script>

<template>
  <el-dialog
    :model-value="show"
    :title="fileName"
    top="10px"
    :close-on-click-modal="true"
    center
    @close="onClose"
    append-to-body
    width="1300px"
  >
    <div style="height: calc(100vh - 140px); width: 100%; overflow: auto">
      <iframe
        :src="show ? iframe_types[ext] + url : ''"
        v-if="iframes.indexOf(ext) >= 0"
        :style="{
          transform: `scale(${scale})`,
          transformOrigin: 'left top',
          width: '100%',
          height: '100%'
        }"
      />
      <div
        v-else
        :style="{ transform: `scale(${scale})`, transformOrigin: 'left top' }"
      >
        <markdown-viewer
          v-if="markdown.indexOf(ext) >= 0"
          :value="markdown_types[ext] + fileContent"
        />
        <vue-office-docx
          :src="show ? url : ''"
          style="width: 100%; height: 100%"
          v-if="docx.indexOf(ext) >= 0"
        />
        <vue-office-excel
          :src="show ? url : ''"
          style="width: 100%; height: 100%"
          v-if="excel.indexOf(ext) >= 0"
        />
        <pdf-viewer
          :pdf-url="show ? url : ''"
          style="width: 100%; height: 100%"
          v-if="pdf.indexOf(ext) >= 0"
        />
        <el-image
          :src="url"
          fit="contain"
          style="margin: 0 auto; display: block; max-width: 500px"
          v-if="img.indexOf(ext) >= 0"
        />
      </div>
    </div>
    <template #footer>
      <el-button
        type="primary"
        icon="ZoomIn"
        @click="scaleHandle(0.2)"
        :disabled="scale >= 2"
        >放大</el-button
      >
      <el-button
        type="primary"
        icon="Remove"
        @click="scale = 1"
        :disabled="scale === 1"
        >还原</el-button
      >
      <el-button
        type="primary"
        icon="ZoomOut"
        @click="scaleHandle(-0.2)"
        :disabled="scale <= 1"
        >缩小</el-button
      >
      <el-button type="warning" icon="Download" @click="fileDownload"
        >下载</el-button
      >
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
iframe {
  border: none;
}
</style>
